<template>
	<view class="box"
		style="padding: 0; margin: 0;background: linear-gradient(135deg,#a1ffce,#faffd1);overflow: hidden;">
		<div class="top">
			<div class="time" style="flex-direction: column;">
				<p style="padding: 5px 10px; background-color: #333;border-radius: 10px;">
					4月38日
				</p>
			</div>
			<div class="grade">
				<h2>用时:{{timeHistory}}</h2>
				<h2 class="twoGrade">
					{{grade}}
				</h2>
			</div>
		</div>
		<!-- 游戏界面 -->
		<div class="boxPlay" scroll-y="true" @scroll="onScroll">
			<view v-for="(item, index) in playArray" :key="index" @click="playMy($event , item , index)"
				:id="'listItem' + index" :style="{ 
					top: `${item.top}px`, 
					left: `${item.left}px`,
					zIndex:`${item.zIndex}`,
					width:`${item.width}px`,
					height:`${item.height}px` ,
					transition:`${item.transition}`,
					transform:`${item.transform}`
				} " class="listItem" v-show="item.flag">
				<image :src="item.url" mode="heightFix" style="height: 90%;width: 90%;"></image>

				<!-- 蒙版 -->
				<div v-show="item.styleMask" style="
						position: absolute;
						top: 0;
						left: 0;
						background-color: rgba(0, 0, 0, 0.4);
						width: 100%;
						height: 100%;
					">
				</div>
			</view>

		</div>



		<!-- 动画 -->
		<!-- <div class="action" v-show="showAction" :style="{top:`${acitonTop - 50}px`, left:`${actionLeft - 50}px`}"
			:class="showAction ? 'startAction' : ''">
			<image :src="actionImage" mode="widthFix" style="width: 100%;height: auto;"></image>
		</div> -->

		<!-- 规则 -->
		<div class="rule">
			<p @click='lookHistory'>规则: 牌面全部拿完即可获胜(--历史记录--)</p>
			<p style="font-weight: 700;color: #333;">剩余卡牌: {{number}}</p>
		</div>



		<ul class="myPlay">
			<image v-if="xiaoxiaole" class="yanhua"
				src="https://gd-hbimg.huaban.com/33f0ae5d33ab9482b253dcd701c72f76bfb0729a1fe0e-wgSbqO_fw658" mode="">
			</image>
			<li v-for="item,index in myArray">
				<image :src="item.url" mode="heightFix" style="width: auto;height: 100%;"></image>
			</li>
			<li v-for="item in 6 - myArray.length"></li>

		</ul>

		<div class="game_over" v-if="game_over">
			{{showTitle}}--得分: {{grade}}
			<div class="caozuo">
				<p @click='anew'>重新开始</p>
				<p @click='goBack'>退出游戏</p>
			</div>
		</div>


		<van-popup :show="showHistory" @close='showHistory = false' position="bottom" custom-style="height: 80%;">
			<ul class="histpryList">
				<van-empty description="没有游戏记录" v-if="historyList.length == 0" />
				<li v-for="item,index in historyList" :key="index" v-else>
					<div class="paim" :class="index < 3 ? 'paimColor1' : ''"><span
							style="font-size: 0.8rem;">NO.</span>{{index + 1 }}</div>
					<div class="image">
						<image :src="item.headImage" mode="widthFix" style="width: 100%;height: auto;"></image>
					</div>
					<div class="centent">
						<p style="color: #19325f;font-size: 18px;">
							{{item.nickname}}
							<van-tag style="margin-left: 5px;" type="success"
								v-if="item.showTitle == '挑战成功'">{{item.showTitle}}</van-tag>
							<van-tag style="margin-left: 5px;" type="danger"
								v-if="item.showTitle == '挑战失败'">{{item.showTitle}}</van-tag>
							<van-tag style="margin-left: 5px;" type="warning"
								v-if="item.showTitle == '无尽模式'">{{item.showTitle}}</van-tag>
						</p>
						<p style="color: #666; font-size: 12px;">
							用时: {{item.takeTime}}

						</p>
					</div>
					<div class="grade">
						{{item.grade}}
					</div>
				</li>

			</ul>
		</van-popup>



		<!--音效 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {


				// 游戏初始化数据
				initArray: [{
						id: "1",
						grade: 1,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小牛牛.svg",
					},
					{
						id: "2",
						grade: 3,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小狗.svg",
					},
					{
						id: "3",
						grade: 8,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小猪仔.svg",
					},
					{
						id: "4",
						grade: 2,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小猫.svg",
					},
					{
						id: "5",
						grade: 5,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小猴子.svg",
					},
					{
						id: "6",
						grade: 9,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小羊.svg",
					},
					{
						id: "7",
						grade: 5,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/狮.svg",
					},
					{
						id: "8",
						grade: 6,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/老虎.svg",
					},
					{
						id: "9",
						grade: 8,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小兔子.svg",
					},
					{
						id: "10",
						grade: 3,

						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/佰盒.svg",
					},
					{
						id: "11",
						grade: 4,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小马.svg",
					},
					{
						id: "12",
						grade: 2,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/小鸡.svg",
					},
					{
						id: "13",
						grade: 2,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/海豚.svg",
					},
					{
						id: "14",
						grade: 2,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/鲨鱼.svg",
					},
					{
						id: "15",
						grade: 2,
						url: "https://mp-b0e75062-7b5f-440f-98a6-55e57dc35f9a.cdn.bspapp.com/羊了个羊icon 图标/睡觉.svg",
					},
					{
						id: "16",
						grade: 2,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/东了个东/鸭子.svg",
					}
				],

				// 你的数据  
				playArray: [],



				myArray: [],

				showAction: false,
				actionImage: '',

				// 游戏是否结束
				game_over: false,

				// 动画出现的位置
				acitonTop: 0,
				actionLeft: 0,

				grade: 0, //分数

				userInfo: {},
				showTitle: '游戏结束',
				xiaoxiaole: false,

				number: 0,
				initNumber: 0,

				count: 0,

				// 音效上下文
				innerAudioContext: null,

				src: "/static/shengying/biu.mp3",

				showHistory: false,
				historyList: [],

				startTime: "",

				// 是否开启 无尽模式
				showEndlessMode: false,

				// 关卡类型
				playType: 1,

				time: null,
				timeHistory: '',

				// 是否开启层级
				styleMask: false,
				windowWidth: 0, // 视口宽度，即屏幕宽度
				windowHeight: 0, // 视口宽度，即屏幕宽度

				lastItem: {}

			};
		},



		mounted() {
			this.userInfo = uni.getStorageSync('userInfo')
		},


		onLoad(option) {
			const systemInfo = uni.getSystemInfoSync();
			this.windowWidth = systemInfo.windowWidth; // 视口宽度，即屏幕宽度
			console.log(this.windowWidth, "this.windowWidth");
			this.windowHeight = systemInfo.windowHeight; // 视口高度，即屏幕宽度 


			console.log(option);
			this.initNumber = option.number
			this.playType = option.type

			if (this.playType == 3 || this.playType == 4 || this.playType == 2) {
				this.styleMask = true
			}

			if (option.number == '-1') {
				this.showEndlessMode = true //开启无尽模式
				this.getInfo(200)
			} else {
				this.getInfo(this.initNumber)
			}

			// 开启计时器
			let sTime = this.startTimer()
			this.time = setInterval(() => {
				this.timeHistory = this.stopTimer(sTime)
			}, 1000)
		},

		beforeDestroy() {
			console.log('离开了');
			if (this.showEndlessMode) {
				this.showTitle = '无尽模式'
				this.saveRecord() //记录挑战失败记录
			}
			clearInterval(this.time)
		},

		methods: {



			// 生成游戏数据
			getInfo(number) {
				if (number >= 50) {
					this.startTime = this.startTimer()
				}

				let initCount = Math.ceil(number / this.initArray.length) % 3 == 0 ?
					Math.ceil(number / this.initArray.length) :
					Math.ceil(number / this.initArray.length) + (3 - Math.ceil(number / this.initArray.length) % 3) // 初始化
				// 标准模式下面 生成卡牌的数量的都固定的
				// 生成数量 / 卡牌数量 = 每张卡牌总数量
				let count = initCount

				console.log(count, 'count');

				let index = 0

				for (let i = 0; i <= number; i++) {

					console.log(index, "index");

					let top = this.randomTop(1)
					let left = this.randomLeft(1)
					let height = 44
					let width = 44

					// let random = Math.floor(Math.random() * this.initArray.length);  炼狱模式打开
					let zIndex = Math.floor(Math.random() * 7) + 1;
					// 防止当前层级 在同一位置出现两次

					// 递归封装 重复了 再赋值
					let jiaoyan = () => {
						let array = this.playArray.find(row => {
							if (row.zIndex == zIndex) {
								// 判断当前图层 的碰撞检查测
								// 循环元素的距离顶部的距离 + 本身高度 > 当前元素距离顶部的距离 && 循环元素距离顶部的距离 < 当前元素距离顶部的距离 + 本身高度
								let leftFlag = (row.top + row.height) > top && row.top < (top + height)
								let rightFlag = (row.left + row.width) > left && row.left < (left + width)
								if (leftFlag && rightFlag) {

								}
								return leftFlag && rightFlag

							}

						})

						// 如果存在重复的 那就重新定义一下top 和 left
						if (array) {
							top = this.randomTop(1)
							left = this.randomLeft(1)
							jiaoyan()
						}

						// return array
					}

					// 判断是否需要校验图层是否被压住
					if (this.styleMask) {
						jiaoyan() //校验    有点耗费性能 先去掉
					}





					this.playArray.push({
						...this.initArray[index],
						flag: true,
						top: top,
						left: left,
						zIndex: zIndex,
						width: width,
						height: height,
						styleMask: false, //蒙版图层 默认 false
						transition: "none",
						transform: 'rotateZ(0deg)',
						uuid: Math.floor(Math.random() * 100000)
					})

					count--

					if (count <= 0) {
						index = index + 1
						count = initCount
					}




				}

				// 卡片总数量
				this.playArray.forEach(item => {
					if (item.flag) {
						this.number++
					}
				})

				// 修改图层样式
				this.editMaskingStyle()
				// this.number = this.playArray.length
			},

			// 判断图层是否被压住
			getLocation(item, ndex) {
				console.log(item, "当前点击元素");
				if (this.styleMask) {
					// 筛选出来所有没有消灭 并且 图层大于当前图层的元素
					let array = this.playArray.find(row => {
						if (row.zIndex > item.zIndex && row.flag) {
							// 判断当前图层 的碰撞检查测
							// 循环元素的距离顶部的距离 + 本身高度 > 当前元素距离顶部的距离 && 循环元素距离顶部的距离 < 当前元素距离顶部的距离 + 本身高度
							let leftFlag = (row.top + row.height) > item.top && row.top < (item.top + item.height)
							let rightFlag = (row.left + row.width) > item.left && row.left < (item.left + item
								.width)
							if (leftFlag && rightFlag) {
								console.log("压住了");
							}
							return leftFlag && rightFlag

						}

					})

					if (!array) {
						// 没有被压住的
						return false
					} else if (array.length != 0) {

						return true //有被压住的
					}
				} else {
					return false
				}
			},

			// 修改图层蒙版样式
			editMaskingStyle() {
				let count = 0

				let time = setInterval(() => {
					count++
				}, 1)
				console.log('正在修改');
				// 如果 playType == 3 或者 4 的话 压住图层
				if (this.styleMask) {
					let newArray = JSON.parse(JSON.stringify(this.playArray)) //深拷贝一份数据
					this.playArray.forEach(item => {
						console.log("执行");
						item.styleMask = false
						if (!item.flag) return
						newArray.forEach(row => {
							if ((row.zIndex > item.zIndex) && row.flag) {
								let leftFlag = (row.top + row.height) > item.top && row.top < (item.top +
									item.height)
								let rightFlag = (row.left + row.width) > item.left && row.left < (item
									.left + item.width)
								if (leftFlag && rightFlag) {
									item.styleMask = true
									return
								}
							}
						})
					})
					clearInterval(time)
				}
				console.log('修改完毕');
			},

			// 点击小卡片
			playMy($event, item, index) {
				// 如果动画没有结束 就不执行下面的代码
				if (this.showAction || this.lastItem.uuid == item.uuid) {
					return
				}

				// 如果被压住 就不执行下面的代码  之前用的 getLocation 方法 现在不用了
				if (item.styleMask) {
					return
				}

				let timeOut = (this.windowHeight * 0.65) - item.top

				timeOut = timeOut < 350 ? 350 : timeOut
				timeOut = timeOut > 550 ? 550 : timeOut

				console.log(timeOut, 'timeOut');






				this.acitonTop = $event.target.y
				this.actionLeft = $event.target.x
				// this.showAction = true
				this.actionImage = item.url
				item.transform = 'rotateZ(360deg)'
				item.transition = 'all 0.7s linear'
				item.zIndex = 999999999999999999
				// item.left = (this.windowWidth / 2) - item.width
				item.top = this.windowHeight
				uni.vibrateShort() //开启震动
				this.editMaskingStyle() //修改蒙版杨氏
				this.number--
				this.lastItem = item


				// 定时器
				setTimeout(() => {
					item.flag = false

					if (this.myArray.length >= 6) {
						return
					}


					this.myArray.push(item)
					// 使用reduce方法按id分组对象，并跟踪每个组的索引  
					let groupedWithIndex = this.myArray.reduce((groups, obj, index) => {
						const id = obj.id;
						// 如果组还不存在，则初始化它，并添加索引信息  
						if (!groups[id]) {
							groups[id] = {
								index: index,
								items: []
							};
						}
						// 将对象添加到对应的组中  
						groups[id].items.push(obj);
						return groups;
					}, {});

					// 提取所有组的索引和项，并基于索引排序  
					let sortedGroups = Object.values(groupedWithIndex).sort((a, b) => a.index - b.index);

					// 合并所有组的项以创建最终结果  
					let result = sortedGroups.reduce((acc, group) => acc.concat(group.items), []);



					// 检测 如果超过三个相同 就删除
					// 使用reduce方法按id分组对象  
					let detection = result.reduce((accumulator, item) => {
						const id = item.id;
						// 如果累积器对象中还没有这个id的键，则初始化它为一个空数组  
						if (!accumulator[id]) {
							accumulator[id] = [];
						}
						// 将对象添加到对应id的数组中  
						accumulator[id].push(item);
						return accumulator;
					}, {});
					// 转换分组对象为数组，每个子数组包含具有相同id的对象  

					this.myArray = []
					// 便利对象
					for (let key in detection) {
						if (detection[key].length < 3) {
							// 对应分数分数 * 3
							this.myArray.push(...detection[key])
						} else {
							this.grade += detection[key][0].grade * 3
							this.xiaoxiaole = true,
								setTimeout(() => {
									this.xiaoxiaole = false
								}, 1000)
						}
					}
					this.showAction = false

					if (this.myArray.length == 6) {
						this.game_over = true
						this.showTitle = this.showEndlessMode ? '无尽模式' : '挑战失败'
						clearInterval(this.time)
						this.saveRecord() //记录挑战失败记录
					}

					if (this.number == 0) {
						this.showTitle = '挑战成功'
						this.game_over = true
						clearInterval(this.time)
						this.saveRecord()
					}

					// // 判断 当前剩余数量
					if (this.number <= 50 && this.showEndlessMode) {
						this.getInfo(150)
						uni.showToast({
							title: `新一波卡片潮来袭`,
							icon: "none",

						})
						// 并且记录这一次生成的次数
					}

					// 修改图层样式
					// this.playArray.splice(index , 1)
				}, timeOut)
			},

			// 保存挑战记录信息
			async saveRecord() {
				if (this.grade < 50) return
				// 整理参数
				let parmse = {
					...this.userInfo,
					grade: this.grade, //分数
					showTitle: this.showTitle,
					number: this.number, //剩余卡牌,
					takeTime: this.stopTimer(this.startTime), ////用时
					// 创建时间
					createTime: this.getTime(),
					playType: this.playType
				}

				delete parmse['_id']



				this.$axios('overallSituation', {
					state: 'add',
					databaseName: "lygyHistoryList",
					...parmse
				})

			},


			// 查看历史记录
			async lookHistory() {
				this.showHistory = true //显示历史巨鹿


				let result = await this.$axios('overallSituation', {
					state: 'look',
					databaseName: "lygyHistoryList",
					playType: this.playType
				})

				result.data.sort((a, b) => b.grade - a.grade);

				this.historyList = result.data
			},

			// 获取当前时间
			getTime() {
				// 获取标准时间格式
				let date = new Date()
				let year = date.getFullYear()
				let month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
				let day = date.getDate() >= 10 ? date.getDate() : '0' + (date.getDate())
				let h = date.getHours() >= 10 ? date.getHours() : '0' + (date.getHours())
				let m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + (date.getMinutes())
				let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + (date.getSeconds())
				return year + '-' + month + '-' + day + " " + h + ":" + m + ":" + s
			},


			// top
			randomTop(index) {
				// 假设 boxPlay 的高度是 370px，这里简单计算一个随机 top 值  
				const boxPlayHeight = this.windowHeight * 0.5;
				const itemHeight = 44; // 假设每个 item 的高度是 8% 的 boxPlay 高度  
				const randomOffset = Math.floor(Math.random() * (boxPlayHeight - itemHeight));
				return randomOffset;
			},

			randomLeft(index) {
				// 同理计算随机 left 值  
				const boxPlayWidth = this.windowWidth;
				const itemWidth = 44; // 假设每个 item 的宽度是 8% 的 boxPlay 宽度  
				const randomOffset = Math.floor(Math.random() * (boxPlayWidth - itemWidth));
				return randomOffset;
			},
			onScroll(e) {
				// 处理滚动事件，如果需要的话  
			},

			// 点击重新开始
			anew() {
				this.game_over = false
				this.myArray = []
				this.playArray = []
				this.grade = 0
				this.number = 0
				this.startTime = this.startTimer()
				// 开启计时器
				let sTime = this.startTimer()
				this.timeHistory = ''
				this.time = setInterval(() => {
					this.timeHistory = this.stopTimer(sTime)
				}, 1000)

				if (this.showEndlessMode) {
					this.getInfo(200)
				} else {
					this.getInfo(this.initNumber)
				}
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},


			// 记录开始时间
			startTimer() {
				const startTime = new Date();
				console.log('开始时间:', startTime.toISOString());
				return startTime;
			},

			// 记录结束时间并计算时间差  
			stopTimer(startTime) {
				const endTime = new Date();
				const timeDifference = endTime - startTime;

				// 将时间差转换为更易读的格式  
				const milliseconds = Math.floor(timeDifference % 1000);
				const seconds = Math.floor((timeDifference / 1000) % 60);
				const minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
				const hours = Math.floor(timeDifference / (1000 * 60 * 60));

				// console.log('结束时间:', endTime.toISOString());
				// console.log('时间差:', hours + '小时 ' + minutes + '分钟 ' + seconds + '秒 ' + milliseconds + '毫秒');
				return hours + '小时 ' + minutes + '分钟 ' + seconds + '秒 '
			}
		}
	};
</script>

<style scoped>
	.box {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.boxPlay {
		width: 100%;
		height: 69%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		/* background-color: blanchedalmond; */
		/* background-color: #f5f3f2; */
		padding: 10px;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;

	}

	.listItem {
		width: 44px;
		/* 假设每个 item 的宽度是 8%，即 370 * 0.08 */
		height: 44px;
		/* 假设每个 item 的高度是 8%，即 370 * 0.08 */
		background-color: #e8f5e9;
		border-radius: 10px;
		position: absolute;
		border: 1px solid #2e7d32;
		border-bottom: 4px solid #2e7d32;
		border-right: 4px solid #2e7d32;
		padding: 2px;
		box-sizing: border-box;
		overflow: hidden;
		box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.4);
	}

	.listItem image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.myPlay {
		width: 100%;
		height: 80px;
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 30px;
		background: linear-gradient(135deg, #2bc0e4, #eaecc6);
		left: 0;
		box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.4);
	}

	.rule {
		position: absolute;
		bottom: 130px;
		left: 0;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
		text-align: left;
		font-size: 0.8rem;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	.myPlay li {
		width: 15%;
		height: 100%;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		background-color: #dfebe0;
	}

	.myPlay li image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.myPlay .yanhua {
		position: absolute;
		top: -100px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}

	.action {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #e1e1e1;
		border-radius: 10px;
		box-sizing: border-box;
		transform-style: preserve-3d;
		z-index: 999999;
		border: 1px solid #2e7d32;
		border-bottom: 4px solid #2e7d32;
		border-right: 4px solid #2e7d32;
		box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.4);
	}

	.action image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}


	.startAction {
		animation: rotateCube 0.55s infinite linear;
	}

	@keyframes rotateCube {
		from {

			opacity: 1;
			transform: rotateY(0deg);
		}

		to {
			top: 90%;
			left: 50%;
			width: 30px;
			height: 30px;
			opacity: 1;
			transform: rotateZ(360deg);
		}
	}

	.game_over {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		font-weight: 700;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		flex-direction: column;

	}

	.game_over .caozuo {
		margin-top: 20px;
	}

	.game_over .caozuo p {
		margin-top: 10px;
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
		padding: 5px 10px;
		border-radius: 5px;
		background: linear-gradient(135deg, #2bc0e4, #eaecc6);
		;
	}

	.top {
		width: 100%;
		height: 80px;
		margin-bottom: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.top .time {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		font-size: 1.4rem;
		font-weight: 700;
		justify-content: center;
		color: #fff;
	}

	.top .grade {
		margin-top: 5px;
		height: 30px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		box-sizing: border-box;
		font-weight: 700;
		font-size: 0.8rem;
		color: #446a37;
		position: relative;

	}

	.top .grade .twoGrade {
		width: 55px;
		height: 55px;
		background: linear-gradient(135deg, #fbed96, #abecd6);
		font-size: 18px;
		color: #446a37;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.histpryList {
		width: 100%;
		height: 100%;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.histpryList li {
		width: 100%;
		height: 80px;
		display: flex;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
		border-bottom: 1px solid #919191;
	}

	.histpryList li .paim {
		width: 50px;
		height: 50px;
		font-size: 20px;
		color: #666;
		font-weight: 700;
		border-right: 1px solid #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.paimColor1 {
		color: #d50000 !important;
		font-size: 26px !important;
	}

	.histpryList li .image {
		width: 50px;
		height: 50px;
		background-color: #666;
		margin-left: 10px;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
	}

	.histpryList li .image image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}




	.histpryList li .centent {
		margin-left: 10px;
		font-weight: 700;
		flex: 1;

	}

	.histpryList li .grade {
		width: 50px;
		height: 50px;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		padding: 5px 10px;
		box-sizing: border-box;
		background-color: #2e7d32;
		float: right;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
	}
</style>